<template>
	<view class="datamodule">
		<view class="content_date">
			<view class="date_location"></view>
			<!-- <view class="date_location" @tap="openAddres">
				<image src="../../static/img/ic_location.png"></image>
				<text>深圳</text>
			</view> -->
			<view class="date_sw">
				<view :class="dateIndex==0?'target':''" @click="dateSw(0);">昨日</view>
				<view :class="dateIndex==1?'target':''" @click="dateSw(1);">近7日</view>
				<view :class="dateIndex==2?'target':''" @click="dateSw(2);">近30日</view>
			</view>
			<view class="date_select">
				<picker mode="selector" :range="picker.pickerArr" @change="pickerSel($event)">
					<text>{{picker.pickerTarget}}</text>
					<image src="../../static/img/ic_pulldown.png"></image>
				</picker>
			</view>
		</view>
		<!-- 支付模块 -->
		<view class="contentModule contentZf">
			<view class="module_list">
				<view class="module_listinc">
					<view class="module_listtop">
						<text>订单交易金额</text>
					</view>
					<view class="gvm_listcon">
						<view class="gvm_total">
							<view class="gvm_totalNum">{{res.payment.total_payment}}</view>
							<view class="">
								<text class="greyfont">与前{{flagNum[dateIndex]}}日相比</text>
								<view class="displayinLine" :class="colorData[res.payment.flag]">
									<image v-if="res.payment.flag==-1" src="../../static/img/ic_down.png"></image>
									<image v-else-if="res.payment.flag==1" src="../../static/img/icon_up.png"></image>
									<text v-else class="greyfont mgleft10">暂无变化</text>
									
									<text v-if="res.payment.flag==-1 || res.payment.flag==1">{{res.payment.d2d}}</text>
								</view>
							</view>
						</view>
						<view class="gvm_listtype">
							<view>
								<view class="gvm_listtype_title">扫码点餐</view>
								<view class="displayinLine" :class="colorData[res.payment.flag]">
									{{res.payment.tangshi_money}}
								</view>
							</view>
							<view>
								<view class="gvm_listtype_title">扫码购</view>
								<view class="displayinLine" :class="colorData[res.payment.flag]">
									{{res.payment.scan_qr_buy_money}}
								</view>
							</view>
							<view>
								<view class="gvm_listtype_title">台卡</view>
								<view class="displayinLine" :class="colorData[res.payment.flag]">
									{{res.payment.taika_money}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="module_listinc">
					<view class="module_listtop">
						<text>订单交易笔数</text>
					</view>
					<view class="gvm_listcon">
						<view class="gvm_total">
							<view class="gvm_totalNum">{{res.num.d2d}}</view>
							<view class="">
								<text class="greyfont">与前{{flagNum[dateIndex]}}日相比</text>
								<view class="displayinLine" :class="colorData[res.num.flag]">
									<image v-if="res.num.flag==-1" src="../../static/img/ic_down.png"></image>
									<image v-else-if="res.num.flag==1" src="../../static/img/icon_up.png"></image>
									<text v-else class="greyfont mgleft10">暂无变化</text>
									
									<text v-if="res.num.flag==-1 || res.num.flag==1">{{res.num.d2d}}</text>
								</view>
							</view>
						</view>
						<view class="gvm_listtype">
							<view>
								<view class="gvm_listtype_title">扫码点餐</view>
								<view class="displayinLine" :class="colorData[res.num.flag]">
									{{res.num.tangshi_num}}
								</view>
							</view>
							<view>
								<view class="gvm_listtype_title">扫码购</view>
								<view class="displayinLine" :class="colorData[res.num.flag]">
									{{res.num.scan_qr_buy_num}}
								</view>
							</view>
							<view>
								<view class="gvm_listtype_title">台卡</view>
								<view class="displayinLine" :class="colorData[res.num.flag]">
									{{res.num.taika_num}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "datamodule3",
		data() {
			return {
				dateIndex:0,//日期索引
				picker:{ //选择器数据
					pickerArr:['全部数据','我的数据'],
					pickerTarget:'全部数据',
					checkType:1
				},
				colorData:{
					'-1':'greenfont',
					'0':'greyfont',
					'1':'redfont',
				},
				timeStatus:{
					'0':'2',
					'1':'3',
					'2':'4'
				},
				flagNum:{ //与前几日对比的显示文字
					'0':'1',
					'1':'7',
					'2':'30'
				}
			};
		},
		props:{
			res:{
				"payment": {
					"total_payment": 0,
					"tangshi_money": 0,
					"scan_qr_buy_money": 0,
					"taika_money": 0,
					"flag": 0,
					"d2d": 0
				},
				"num": {
					"total_num": 0,
					"tangshi_num": 0,
					"scan_qr_buy_num": 0,
					"taika_num": 0,
					"flag": 0,
					"d2d": 0
				}
			}
		},
		methods:{
			pickerSel:function(e){
				this.picker.pickerTarget = this.picker.pickerArr[e.detail.value];
				this.picker.checkType = e.detail.value+1;
				this.refreshDataEmit();
			},
			dateSw:function(index){
				this.dateIndex = index;
				this.refreshDataEmit();
			},
			//刷新当前页面的数据
			refreshDataEmit:function(){
				this.$emit('refreshData',{
					type:'Zf',
					data:{
						data_type:2,
						check_type:this.picker.checkType, //全部/我的数据
						seachtime:this.timeStatus[this.dateIndex]  //时间
					}
				})
			}
		},
		components: {
		}
	}
</script>

<style lang="scss" scoped>
	@import './datamodule.scss';
</style>
